<template>
  <div class="find">
    <!-- 头部标题 -->
    <van-nav-bar title="发现"> </van-nav-bar>
    <!-- 面试技巧 -->
    <div class="face">
      <van-cell is-link>
        <template #title>
          <span class="technic">面试技巧</span>
        </template>
        <template #default>
          <span>查看更多</span>
        </template>
      </van-cell>
      <technic
        v-for="(item, index) in technicList"
        :item="item"
        :key="index"
      ></technic>
    </div>
    <!-- 市场数据 -->
    <div class="hot">
      <van-cell is-link>
        <template #title>
          <span class="technic">市场数据</span>
        </template>
        <template #default>
          <span>查看更多</span>
        </template>
      </van-cell>
      <div class="tags">
        <span>广州</span>
        <span>系统集成工程师</span>
      </div>
      <div class="salary" v-for="(item, index) in salaryList" :key="index">
        <div class="year">
          2020年工资
        </div>
        <div class="progress">
          <div class="inner">￥8990</div>
        </div>
        <div class="arrow">
          <i class="iconfont iconicon_xiajiang" style="color:red"></i>
          <i class="iconfont iconicon_shangsheng" style="color:green"></i>
          <span>-16%</span>
        </div>
      </div>
      <div class="showmore" @click="showmore">
        <template v-if="isOpen === false">
          展开更多
          <van-icon name="arrow-down" />
        </template>
        <template v-else>
          收起更多
          <van-icon name="arrow-up" />
        </template>
      </div>
    </div>

    <!-- 面经分享 -->
    <div class="share">
      <van-cell is-link>
        <template #title>
          <span class="technic">面试技巧</span>
        </template>
        <template #default>
          <span>查看更多</span>
        </template>
      </van-cell>
      <share v-for="(item, index) in 3" :key="index"></share>
    </div>
  </div>
</template>

<script>
import technic from './technic.vue'
import share from './share.vue'
import { apiGetTechnic } from '@/api/find.js'
export default {
  data () {
    return {
      isOpen: false,
      salaryList: 4,
      technicList: []
    }
  },
  components: {
    technic,
    share
  },
  methods: {
    showmore () {
      this.isOpen = !this.isOpen
      if (this.isOpen === true) {
        this.salaryList = 7
      } else {
        this.salaryList = 4
      }
    },
    async getTechnic () {
      const res = await apiGetTechnic({
        limit: 3
      })
      this.technicList = res.data.list
    }
  },
  created () {
    this.getTechnic()
  }
}
</script>

<style lang="less">
.find {
  font-size: 12px;
  margin-bottom: 55px;
  .van-nav-bar__title.van-ellipsis {
    font-size: 20px;
  }
  .technic {
    font-size: 20px;
  }

  .hot {
    .tags {
      margin-left: 15px;
      span {
        display: inline-block;
        background-color: #ccc;
        font-size: 14px;
        margin: 5px;
        border-radius: 5px;
        padding: 5px;
        color: #333;
      }
    }
    .salary {
      margin: 15px 15px 0;
      display: flex;
      font-size: 14px;
      .progress {
        background-color: #ebdfdf;
        height: 15px;
        flex: 1;
        border-radius: 5px;
        margin: 0 10px;
        .inner {
          height: 15px;
          background-color: #fe6d67;
          border-radius: 5px;
          box-sizing: border-box;
          width: 40%;
          text-align: right;
          padding-right: 5px;
          color: #fff;
          line-height: 15px;
        }
      }
    }
    .showmore {
      text-align: center;
      margin-top: 15px;
      font-size: 14px;
      color: #999;
    }
  }
}
</style>
